<template>
  <div class="common-layout">
    <el-container>
      <el-aside width="250px">
        <img :src="src" class="image" />
      </el-aside>
      <el-main>
        <div class="main-content">
          <div class="title">这是一个测试</div>
          <el-text line-clamp="2" class="text">
            The -webkit-line-clamp CSS property allows limiting of the contents of a block to the specified number of
            lines.
          </el-text>
          <div class="icons">
            <span class="icon-item">1<svg t="1732897426077" class="icon" viewBox="0 0 1024 1024" version="1.1"
                xmlns="http://www.w3.org/2000/svg" p-id="4991" width="200" height="200">
                <path
                  d="M857.28 344.992h-264.832c12.576-44.256 18.944-83.584 18.944-118.208 0-78.56-71.808-153.792-140.544-143.808-60.608 8.8-89.536 59.904-89.536 125.536v59.296c0 76.064-58.208 140.928-132.224 148.064l-117.728-0.192A67.36 67.36 0 0 0 64 483.04V872c0 37.216 30.144 67.36 67.36 67.36h652.192a102.72 102.72 0 0 0 100.928-83.584l73.728-388.96a102.72 102.72 0 0 0-100.928-121.824zM128 872V483.04c0-1.856 1.504-3.36 3.36-3.36H208v395.68H131.36A3.36 3.36 0 0 1 128 872z m767.328-417.088l-73.728 388.96a38.72 38.72 0 0 1-38.048 31.488H272V476.864a213.312 213.312 0 0 0 173.312-209.088V208.512c0-37.568 12.064-58.912 34.72-62.176 27.04-3.936 67.36 38.336 67.36 80.48 0 37.312-9.504 84-28.864 139.712a32 32 0 0 0 30.24 42.496h308.512a38.72 38.72 0 0 1 38.048 45.888z"
                  p-id="4992"></path>
              </svg></span>
              <span class="icon-item">3 <svg t="1732897478187" class="icon" viewBox="0 0 1024 1024" version="1.1"
                xmlns="http://www.w3.org/2000/svg" p-id="6888" width="200" height="200">
                <path
                  d="M256 560.64c81.664 24.789333 121.472 125.653333 127.274667 291.328C474.410667 845.653333 512 817.066667 512 768v-213.333333l298.666667 0.768a42.666667 42.666667 0 0 0 42.496-46.634667l-27.904-299.264a42.666667 42.666667 0 0 0-42.581334-38.698667H256v389.845334z m554.666667 80.128L597.333333 640v128c0 114.688-93.269333 170.666667-256 170.666667H298.666667v-42.666667c0-177.92-33.450667-256-85.333334-256H170.666667V85.504h611.84a128 128 0 0 1 127.701333 116.053333l27.904 299.306667A128 128 0 0 1 810.666667 640.768zM128 85.333333v554.666667H42.666667V85.333333z"
                  fill="#2E2F30" p-id="6889"></path>
              </svg></span>
            <span class="icon-item">作者 <el-text line-clamp="1" class="author-text">
                The -webkit-line-clamp CSS property
              </el-text></span>
          </div>
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';

const src =
  'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg';

const imageRef = ref(null);
</script>

<style lang="scss" scoped>
.el-aside {
  padding: 0; // 移除内边距
  background-color: #f0f2f5;
  border-right: 1px solid #e0e0e0;
  overflow: hidden;

  .image {
    width: 100%;
    height: 100%; // 设置高度为100%
    object-fit: cover; // 使图片覆盖整个区域
    border-radius: 8px;
  }

  .image-slot {
    text-align: center;
    color: #999;
    font-size: 14px;
  }
}


.el-main {
  padding: 20px;
  background-color: #fff;
  height: 100%;


  .main-content {
    max-width: 600px;

    .title {
      font-size: 24px;
      margin-bottom: 20px;
      color: #333;
    }

    .text {
      font-size: 16px;
      color: #666;
      margin-bottom: 20px;
    }

    .icons {
      display: flex;
      align-items: center;
      gap: 20px;

      .icon-item {
        display: flex;
        align-items: center;
        gap: 10px;

        svg {
          width: 24px;
          height: 24px;
        }

        .author-text {
          font-size: 14px;
          color: #999;
        }
      }
    }
  }
}


@media (max-width: 768px) {
  .el-aside {
    width: 100%;
    border-right: none;
    border-bottom: 1px solid #e0e0e0;
  }

  .el-main {
    padding-top: 0;
  }
}
</style>